<template>
  <div class="loginPage">
    <div class="page-head">
<!--      <h1 style="color: aliceblue">智能家庭助手</h1>-->
      <p style="color: aliceblue;font-size: 45px">智能家庭助手</p>
    </div>
    <div class="loginForm">
      <div class="account">
        <p style="display: inline">账 号：</p><el-input v-model="userInfo.username" placeholder="用户名/手机号" clearable />
      </div>
      <div class="password">
        <p style="display: inline">密 码：</p><el-input v-model="userInfo.password" type="password" placeholder="请输入密码" show-password/>
      </div>
      <div class="loginBtn">
        <el-button type="primary" size="large" @click="login"><span style="font-size: 25px;margin: 10px">登 录</span></el-button>
      </div>
    </div>
  </div>
</template>

<script>
import {loginRequest} from "@/api/user";
import {showMessage} from "@/utils/displayUtils";
import {getAccountInfo, getAccountList, saveUserInfo, sendAddAccount, sendLoginRequest} from "@/utils/userUtils";

export default {
  name: "index",
  data() {
    return {
      userInfo: {
        username: '',
        password: '',
      },
    }
  },
  mounted() {
    // getAccountList().then((data) => {
    //   console.log(data.data)
    // })
  },
  methods: {
    login: function (){
      console.log('登录...')
      // this.$router.push('/smarthome/homepage')
      // getAccountInfo(this.userInfo).then((data) => {
      //   if (data.code == 200 && data.data != null) {
      //     saveUserInfo(data.data)
      //     showMessage(this,'登录成功','success')
      //     this.$router.push('/smarthome/homepage')
      //   }else{
      //     showMessage(this,'账号或密码错误','warning')
      //   }
      // })
      this.$store.dispatch('Login', this.userInfo).then((data) => {
        // console.log(data)
        if (data.code == '200') {
          showMessage(this, data.msg,'success')
          this.$router.push('/smarthome/homepage')
        }else {
          showMessage(this, data.msg, 'warning')
        }
      }).catch((error) => {
        // console.log(error)
      })
    }
  }
}
</script>

<style scoped>
.page-head{
  background:url("../../../assets/background/head_bg.png");
  width: 100%;
  position:fixed;
  background-size:100% 100%;
}
.loginPage {
  background:url("../../../assets/background/login-bg.jpg");
  width: 100%;
  height: 100%;
  position:fixed;
  margin-top: -65px;/*上边距*/
  margin-left: -10px;/*左边距*/
  background-size:100% 100%;
}

.loginForm{
  /*background:url("../../../assets/background/login-bg2.jpg");*/
  /*background-size: cover;*/
  background: rgba(240, 248, 255, 0.71);
  padding: 10px;
  /*上 右 下 左*/
  margin: 20% 35% 0 40%;
  width: 20%;
  height: 20%;
  border-radius: 10px;
}
.el-input{
  width: 70%;
}
.account{
  margin: 20px 0 10px 0;
  font-size: 12px;
}
.password{
  margin: 20px 0 20px 0;
  font-size: 12px;
}
.loginBtn{
  font-size: 12px;
}
</style>
